// import {Upload, Modal, Card, Form, Input, Select, TreeSelect} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {Button, Card, DatePicker, Form, Input, Modal, Select, TreeSelect, Upload} from 'antd';
import {PageContainer} from '@ant-design/pro-layout';
import './index.less';
import React, {FC} from "react";
import {connect,Dispatch} from "umi";
// import {PageContainer} from "@ant-design/pro-layout";
import {formatMessage, FormattedMessage} from "@@/plugin-locale/localeExports";
// import FormItem from "antd/lib/form/FormItem";
// import { TreeSelect } from 'antd';

// interface BasicFormProps {
//   submitting: boolean;
//   dispatch: Dispatch;
// }

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
  },
];
const FormItem = Form.Item;
const {RangePicker} = DatePicker;

class MyTree extends React.Component {
  state = {
    value: undefined,
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  render() {
    return (
      <TreeSelect
        style={{ width: '100%' }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="Please select"
        treeDefaultExpandAll
        onChange={this.onChange}
      />
    );
  }
}


class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}

// ReactDOM.render(<PicturesWall />, mountNode);
interface AdvancedFormProps {
  dispatch: Dispatch;
  submitting: boolean;
}

const NewPage: FC<AdvancedFormProps> = (props) =>{
  //class NewPage extends React.Component<BasicFormProps> {



  const { submitting } = props;
  const [form] = Form.useForm();
//const setShowPublicUsers = React.useState(false);
 const formItemLayout = {
    labelCol: {
      xs: {span: 24},
      sm: {span: 7},
    },
    wrapperCol: {
      xs: {span: 24},
      sm: {span: 12},
      md: {span: 10},
    },
  };
  const  submitFormLayout = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 10, offset: 7 },
    },
  };
  const onFinish = (values: { [key: string]: any }) => {
    const {dispatch} = props;
    dispatch({
      type: 'formAndbasicForm/submitRegularForm',
      payload: values,
    });
  };
  const onFinishFailed = (errorInfo: any) => {
    // eslint-disable-next-line no-console
    console.log('Failed:', errorInfo);
  };

  const onValuesChange = (changedValues: { [key: string]: any }) => {
    const {publicType} = changedValues;
    if (publicType) {
      // setShowPublicUsers(publicType === '2');
    }

  };



  return (
      <><PageContainer content={<FormattedMessage id="form.new.desc"/>}>
        <Card bordered={false}>
          <Form
            hideRequiredMark
            style={{marginTop: 8}}
            form={form}
            name="basic"
            initialValues={{public: '1'}}
            onFinish={onFinish}
            // @ts-ignore
            onFinishFailed={onFinishFailed(0)}
            onValuesChange={onValuesChange}
          >
            <FormItem
              {...formItemLayout}
              label={<FormattedMessage id="form.new.newcourse.coursename.label"/>}
              name="publicType"
              rules={[
                {
                  required: true,
                  message: formatMessage({id: 'formandbasic-form.title.required'}),
                },
              ]}
            >
              <Input placeholder={formatMessage({id: 'form.new.newcourse.coursename.placeholder'})}/>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={<FormattedMessage id="form.new.newcourse.author.label"/>}
              name="publicType"
              rules={[
                {
                  required: true,
                  message: formatMessage({id: 'formandbasic-form.title.required'}),
                },
              ]}
            >
              <Input placeholder={formatMessage({id: 'form.new.newcourse.author.placeholder'})}/>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={<FormattedMessage id="formandbasic-form.date.label"/>}
              name="date"
              rules={[
                {
                  required: true,
                  message: formatMessage({id: 'formandbasic-form.date.required'}),
                },
              ]}
            >
              <RangePicker
                style={{width: '100%'}}
                placeholder={[
                  formatMessage({id: 'formandbasic-form.placeholder.start'}),
                  formatMessage({id: 'formandbasic-form.placeholder.end'}),
                ]}/>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="课程分类"
              name="payAccount"
              rules={[{required: true, message: '请选择付款账户'}]}
            >
              <Select placeholder="test@example.com">
                <Select.Option value="ant-design@alipay.com">ant-design@alipay.com</Select.Option>
              </Select>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="课程分类"
              name="payAccount2"
              rules={[{required: true, message: '请选择付款账户'}]}
            >
            <MyTree/>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="课程封面"
              name="payAccount2"
              rules={[{required: true, message: '请选择付款账户'}]}
            >
             <PicturesWall/>
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                <FormattedMessage id="formandbasic-form.form.submit" />
              </Button>
              <Button style={{ marginLeft: 8 }}>
                <FormattedMessage id="formandbasic-form.form.save" />
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageContainer></>

    );
  }

// ReactDOM.render(<PicturesWall />, mountNode);
export default connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
  submitting: loading.effects['formAndbasicForm/submitRegularForm'],
}))(NewPage);
